<template>
  <div class="common-layout ">
    <el-container>
      <el-header id="nav" class="header common">
        <el-row>
          <!--          logo-->
          <el-col :span="2">
            <div class="grid-content ep-bg-purple"/>
            <el-image
                class=""
                style="width: 100px; height: 80px"
                :src="logoUrl"
                :zoom-rate="1.2"
                :max-scale="7"
                :min-scale="0.2"
                :initial-index="4"
                fit="cover"
            />
          </el-col>
          <el-col :span="14">
            <div class="grid-content ep-bg-purple-light"/>
            <!--          菜单-->
            <el-menu
                :default-active="activeIndex"
                class="el-menu-demo"
                mode="horizontal"
                @select="handleSelect"
            >
              <el-menu-item index="1">{{ category1 }}</el-menu-item>
              <el-menu-item index="2">{{ category2 }}</el-menu-item>
              <el-menu-item index="3">{{ category3 }}</el-menu-item>
              <el-menu-item index="4">{{ category4 }}</el-menu-item>
              <el-menu-item index="5">{{ category5 }}</el-menu-item>
            </el-menu>
          </el-col>

          <!--          发布文章按钮-->
          <el-col :span="3">
            <el-button @click="insertArticle(user.account)" plain class="insert">
              发表文章
              <el-icon style="margin-left: 5px">
                <Plus/>
              </el-icon>
            </el-button>
          </el-col>


          <!--          用户功能下拉框-->
          <el-col :span="3">
            <el-dropdown class="user-menu">
              <el-button type="success" plain class="user-menu-button">
                {{ user.account }}
                <el-icon class="el-icon--right">
                  <arrow-down/>
                </el-icon>
              </el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item>查看我的文章</el-dropdown-item>
                  <el-dropdown-item>修改个人信息</el-dropdown-item>
                  <el-dropdown-item @click="loginOut()">退出登录</el-dropdown-item>
                  <el-dropdown-item>注销账号</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </el-col>
          <!--          头像-->
          <el-col :span="2">
            <div class="grid-content ep-bg-purple"/>
            <div class="avatar">
              <el-avatar
                  fit="cover"
                  :src=user.avatarUrl
                  class="avatar-img"
              />
            </div>
          </el-col>

        </el-row>

      </el-header>
      <el-main class="common main">
        <!--        查询框-->
        <div>
          <el-input @blur="search()" class="search" :prefix-icon="Search" v-model="input"
                    placeholder="查询当前板块下的文章"/>
        </div>
        <!--        文章块-->
        <div class="containerItem" v-for="item in pageData" :key="item.aid">
          <div>
            <span class="text">{{ item.title }}</span>
          </div>
          <div class="detail">
            <span class="type">{{
                item.category === 1 ? "游戏攻略" : item.category === 2 ? "官方更新" : item.category === 3 ? "交友交流" : item.category === 4 ? "趣事分享" : "其他"
              }}</span>
            <span class="reading">{{ item.readingQuantity }}浏览</span>
          </div>
          <div class="time">
            <span>发帖时间：{{ item.createTime }}</span>
            <el-button @click="toDetail(item.aid)" size=""
                       style="background: #165ccd; margin-left: 15px; color: #bbd3dc">查看全文
            </el-button>
          </div>
          <div>

          </div>
        </div>
        <!--        分页条-->
        <div class="pagination" style="margin-top: 20px ">
          <el-pagination
              v-model:current-page="findNewsPageInfo.pageNum"
              v-model:page-size="findNewsPageInfo.pageSize"
              @size-change="getPageList"
              @current-change="getPageList"
              :page-sizes="[5,7,10]"
              background
              layout="prev, pager, next , ->, sizes, total"
              :total="totalSize"/>
        </div>
      </el-main>
    </el-container>
    <my-footer></my-footer>
  </div>
</template>
<script setup>
import {defineUser} from "../../stores/userStore.js";
import {onMounted, ref, watch} from "vue";
import {getUserInfo, loginOutApi} from "../../api/userApi.js";
import router from "../../routers/router.js";
import {ArrowDown, Search, Plus} from '@element-plus/icons-vue'
import {getCategoryApi, increasedReading} from "../../api/articleApi.js";
import MyFooter from "../../components/myFooter.vue";
import {removeToken} from "../../utils/token-tuils.js";
import pinia from "../../stores/pinia.js";

//logo路径
let logoUrl = "https://s11.ax1x.com/2023/12/20/pioO4YT.png"
//定义有关对象
const findNewsPageInfo = ref(
    {
      keyWords: "", // 搜索标题关键字
      type: 0,           // 新闻类型
      pageNum: 1,        // 页码数
      pageSize: 5,     // 页大小
    }
)
const totalSize = ref(0) //分页总数量
// 初始化列表数据
const pageData = ref([{
  aid: null,
  title: "",
  category: null,
  readingQuantity: null,
  author: null,
  createTime: null
}])
//绑定查询条的数据
let input = ref()
// 初始化请求分页列表数据
const getPageList = async () => {

  let {data} = await getCategoryApi(findNewsPageInfo.value)
  pageData.value = data.data.pageDate
  findNewsPageInfo.value.pageNum = data.data.pageNum
  findNewsPageInfo.value.pageSize = data.data.pageSize
  totalSize.value = data.data.totalSize
  console.log(pageData.value)
}

//挂载完毕生命周期
onMounted(async () => {
  let {data} = await getUserInfo()
  if (data.codo === 4010) {
    await router.push('/login')
  }
  //更新pinia数据
  user.uid = data.data.uid
  user.username = data.data.username
  user.account = data.data.account
  user.avatarUrl = data.data.avatarUrl
  user.age = data.data.age
  user.gender = data.data.gender

})
onMounted(() => {
  getPageList()
})
let user = defineUser(pinia)
//导航栏菜单数据
const activeIndex = ref('1')
const activeIndex2 = ref('1')
//切换manu时将type值重新赋值
const handleSelect = (key, keyPath) => {
  findNewsPageInfo.value.type = parseInt(key) - 1
}

//查询方法
function search() {
  findNewsPageInfo.value.keyWords = input;
}

//文章分类变量
let category1 = "主页"
let category2 = ref("游戏攻略")
let category3 = ref("官方更新")
let category4 = ref("交友交流")
let category5 = ref("趣事分享")
// 监视初始化参数type的变化,当type发生改变的时候重新发送请求获取列表数据
watch(() => findNewsPageInfo.value, () => {
  getPageList()
}, {
  deep: true,
})
//导航栏浮动
window.onscroll = function () {
  let nav = document.getElementById('nav');
  if (window.pageYOffset > 0) {
    nav.classList.add("position");
  } else {
    nav.classList.remove("position");
  }
};

//退出登录方法
function loginOut() {
  loginOutApi()
  //清空用户信息
  user.initUserInfo()
  router.push("/login")
}

//查看全文
const toDetail = (aid) => {
  //触发浏览量+1的方法
  increasedReading(aid)
  router.push({path: "/article", query: {aid: aid}});
}
//新增文章
const insertArticle = (account) => {
  console.log(account)
  router.push({path: "/changeArticle", query: {account: account}})
}

</script>
<style scoped>
.common-layout {
  width: 100vw;
  height: 100vh;


}

.header {

  width: 1200px;
  height: 80px;
  background: rgb(255, 255, 255);
  border-left: 1px solid #DCDFE6;
  border-bottom: 1px solid #DCDFE6;
  border-right: 1px solid #DCDFE6;

}

.position {
  z-index: 9999; /* 设置导航栏的z-index值 */
  position: fixed;
  left: 360px;
  top: 0;
}

.common {
  margin: 0 auto;
}

.avatar {
  margin-top: 15px;
  width: 70px;
  height: 50px;
}

.avatar-img {
  width: 100%;
  height: 100%;
}

::v-deep.el-menu-demo {
  height: 80px;
  margin-left: 50px;
}

.user-menu-button {
  margin-top: 15px;
  height: 50px;
}

.search {
  width: 500px;
  height: 50px;
}

.insert {
  height: 50px;
  margin-top: 15px;
  margin-right: 10px;
}

.main {
  width: 1200px;
  background: #FAFAFA;
}

.containerItem {
  width: 500px;
  height: 150px;
  border: 1px solid #DCDFE6;
  margin: 20px auto;
  background: rgb(255, 255, 255);
}

.text {
  display: inline-block;
  margin-top: 10px;
  font-size: 20px;
}

.detail {
  margin-top: 10px;
}

.type {
  background: rgb(0, 191, 255, 0.5);
  height: 40px;
  width: 80px;
  line-height: 40px;
  display: inline-block;
  float: left;
  margin-left: 40px;
}

.time {
  margin-top: 20px;
}

.pagination {
  margin-left: 400px;
}
</style>